<template>
  <Base
    v-if="showForm.includes('1')"
    :data="formModel.order_details || {}"
  ></Base>
  <Approve
    v-if="showForm.includes('2')"
    :data="formModel.order_approve_details || {}"
  ></Approve>
  <Dispatch
    v-if="showForm.includes('3')"
    :data="formModel.order_dispatch_details || {}"
  ></Dispatch>
  <!-- <Driver
    v-if="showForm.includes('4')"
    :data="formModel.driver_details || {}"
  ></Driver> -->

  <Car
    v-if="showForm.includes('5')"
    :data="formModel.order_execute_details || {}"
  ></Car>

  <Bill
    v-if="showForm.includes('9')"
    :data="formModel.order_bill_details || {}"
  ></Bill>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps, watch } from 'vue';
  import Base from './Base.vue';
  import Approve from './Approve.vue';
  import Dispatch from './Dispatch.vue';
  import Driver from './Driver.vue';
  import Car from './Car.vue';
  import Bill from './Bill.vue';

  interface Props {
    showForm: string[];
    data: any;
  }
  const props = withDefaults(defineProps<Props>(), {
    showForm: () => {
      return [];
    },
  });
  const formModel = ref<any>({});

  watch(
    () => props.data,
    (newVal) => {
      formModel.value = newVal || {};
    },
    {
      immediate: true,
    }
  );
</script>

<style lang="less" scoped></style>
